<!--
 * 左侧滑动菜单
 *
 * @Author: Reisen
 * @Date: 2025-11-26
-->
<template>
  <div class="sidebar">
    <el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="collapse" background-color="#121212"
      text-color="#b3b3b3" active-text-color="#1db954" router>
      <template v-for="item in items">
        <template>
          <el-menu-item :index="item.index" :key="item.index">
              <b style="font-size: 15px;">
                {{item.title}}
              </b>


          </el-menu-item>
        </template>
      </template>

    </el-menu>
  </div>
</template>

<script>
import bus from "../assets/js/bus"
export default {
    data(){
        return{
            collapse: false,
            items:[
                {
                    icon: 'iconfont icon-home-menu',
                    index: 'Info',
                    title: '系统首页'
                },
                {
                    icon: 'iconfont icon-user-menu',
                    index: 'Consumer',
                    title: '用户管理'
                },
                {
                    icon: 'iconfont icon-singer-menu',
                    index: 'Singer',
                    title: '歌手管理'
                },
                {
                    icon: 'iconfont icon-sing-list-menu',
                    index: 'SongList',
                    title: '歌单管理'
                },

            ]
        }
    },
    computed:{
        onRoutes(){
            return this.$route.path.replace('/','');
        }
    },
    created(){
        //通过Bus进行组件间的通信，来折叠侧边栏
        bus.$on('collapse',msg =>{
            this.collapse = msg
        })
    }
}
</script>
<style scoped>
.sidebar {
  display: block;
  position: absolute;
  left: 0;
  top: 70px;
  bottom: 0;
  background-color: #121212;
  overflow-y: scroll;
  color: #b3b3b3;
}

.sidebar::-webkit-scrollbar {
  width: 0;
}

.sidebar-el-menu:not(.el-menu--collapse) {
  width: 150px;
}

.sidebar>ul {
  height: 100%;
}

.el-menu-item i {
  font-size: 26px;
}

.el-menu-item b {
  font-size: 20px;
  margin-left: 10px;
}

.el-menu-item.is-active {
  background-color: rgba(29, 185, 84, 0.1);
}

.el-menu-item:hover {
  color: white;
}
</style>
